<template>
  <div class="c-bg-sgray c-ph24 c-pt24">
    <div v-for="(item, index) in dataInfo" :key="index" class="c-ph24 c-pt28 c-pb24 c-bg-white c-br20 c-mb24">
      <div class="c-flex-row c-pb40 c-bd-b1">
        <img class="c-ww80 c-hh80 c-br40 c-flex-shrink0 c-mr32" :src="$addXossFilter(item.headimg, require('../../../assets/defult_head.png'))" alt="">
        <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb">
          <div class="c-flex-row c-aligni-end">
            <span class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</span>
            <span class="c-fs20 c-fc-sblack c-flex-shrink0 c-ml12">{{item.title}}</span>
          </div>
          <div class="c-fs20">
            <span class="theme-fc">实付：{{'￥' | iosPriceFilter}}{{item.price}}</span><span class="c-ph16 c-fs24">|</span><span class="c-fc-gray">{{item.status == 1 ? '上架中' : '已下架'}}</span>
          </div>
        </div>
      </div>
      <div class="c-pt20 c-ph66 c-flex-row c-justify-sb">
        <div @click="goStudentList(item.atId)" class="c-fs24 c-fc-xblack">学员预约</div>
        <div @click="goMyScheduling(item.atId)" class="c-fs24 c-fc-xblack">排班情况</div>
      </div>
    </div>
    <div @click="clickChangeRole" class="theme-bg c-fc-white changeRole c-ww120 c-pv12 c-textAlign-c c-fs20">切换学员</div>
    <!-- <loading-status-tem :dataStatus="dataStatus" noDataText="暂无相关预约"></loading-status-tem> -->
  </div>
</template>

<script>
// import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 20;
let page = 1;
export default {
  name: "myBookingTeacher",
  components: {
    // loadingStatusTem,
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      isLoading: false,
      dataInfo: [],
      dataStatus: 'HAS_MORE_DATA',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    goMyScheduling(atId) {
      this.$routerGo(this, "push", {
        path: "/homePage/booking/bookingTime",
        query: {
          atId: atId,
          ckFrom: global.ckFrom.booking,
          isFromScheduling: true
        }
      });
    },
    goStudentList(atId) {
    this.$routerGo(this, "push", {
        path: `/member/myBooking/myBookingList`,
        query: {
          userListType: 2,
          sAtId: atId
        }
      });
    },
    clickChangeRole() {
      this.$routerGo(this, "push", {
        path: `/member/myBooking/myBookingList`,
        query: {
          userListType: 1
        }
      });
    },
    // 预约列表
    getBookingList() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        this.$loading.show();
        utilJs.getMethod(
          global.apiurl + `appointment/schedulingList?&page=${page}&limit=${LIMIT}`,
          function (res) {
            $this.$loading.hide();
            if (page == 1) {
              if (res.data && res.data.length == 0) { //不是老师，直接跳转到学员预约列表
                $this.$routerGo($this, "push", {
                  path: `/member/myBooking/myBookingList`,
                  query: {
                    userListType: 1
                  }
                });
              }
              $this.dataInfo = res.data;
            } else {
              $this.dataInfo = [...$this.dataInfo, ...res.data];
            }
            if (res.data && (res.data.length < LIMIT)) {
              $this.dataStatus = page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.dataStatus = 'HAS_MORE_DATA';
              page++;
            }
            $this.isLoading = false;
            // $this.dataInfo.forEach((item, index) => {
            //   if (item.remark && item.remark.length > 0 && Array.isArray(item.remark)) {
            //     for (let i = 0; i < item.remark.length; i++) {
            //       if (item.remark[i].type == 1 && item.remark[i].content && item.remark[i].content.substr(0, 4) == 'http' && item.remark[i].content.length > 5) {
            //         let ic = item.remark[i].content;
            //         item.remark[i].content = '';
            //         utilJs.getPageHtml(ic, sres => {
            //           $this.dataInfo[index].remark[i].content = sres;
            //         }, () => {
            //           item.remark[i].content = '';
            //         })
            //       }
            //     }
            //   }
            // })
          }, function () {
            $this.dataStatus = 'DATA_ERROR';
            $this.$loading.hide();
            $this.isLoading = false;
          }
        );
      }
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的排班", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的排班", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.dataStatus == 'HAS_MORE_DATA' && that.dataInfo.length > 0) {
          that.getBookingList();
        }
      });
    }
  },
  activated() {
    setDocumentTitle("我的排班");// eslint-disable-line
    this.dataInfo = [];
    this.isLoading = false;
    page = 1
    this.getBookingList();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-lh56{
  line-height: 1.4rem;
}
.changeRole {
  position: fixed;
  bottom: 1rem;
  right: 0;
  box-shadow: 0 2px 4px 0 rgba(254,121,0,0.30);
  border-radius: 2.5rem 0 0 2.5rem;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
